<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>TLS指纹数据系统</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f7f8fa;
            color: #333;
            margin: 0;
            padding: 0;
        }

        /*--------------------------------- 查询窗口 ---------------------------------*/
        form {
            max-width: 800px;
            margin: 50px auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
            border-radius: 5px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        h1 {
            margin-top: 0;
            margin-bottom: 20px;
            font-size: 36px;
            color: #008080;
        }

        select,
        input[type="text"] {
            padding: 10px;
            margin-right: 10px;
            border: none;
            border-radius: 5px;
            background-color: #f7f7f7;
            font-size: 16px;
        }

        button {
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            background-color: #008080;
            color: #fff;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.2s ease-in-out;
        }

        button:hover {
            background-color: #fff;
            color: #008080;
            box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
            transform: translateY(-2px);
        }

        .button-container {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
        }

        .button-container button {
            margin-right: 20px;
        }

        .condition {
            margin-top: 20px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }

        .condition select {
            flex-grow: 1;
        }

        .condition input[type="text"] {
            flex-grow: 1;
            max-width: 200px;

        }

        .condition button {
            margin-left: 20px;
            background-color: #e74c3c;
            transition: all 0.2s ease-in-out;
        }

        .condition button:hover {
            background-color: #fff;
            color: #e74c3c;
            box-shadow: 0px 2px 10px rgba(231, 76, 60, 0.2);
            transform: translateY(-2px);
        }

        .condition:first-of-type button {
            display: none;
        }

        .condition select:first-of-type {
            width: 80px;
        }

        .condition select:nth-of-type(2) {
            max-width: 200px;
            min-width: 200px;
        }

        .condition:first-of-type select:first-of-type {
            display: none;
        }

        /* --------------------------------- 模态框 --------------------------------- */

        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
        }

        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
        }

        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }

        /* --------------------------------- 界面 --------------------------------- */
        .container {
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .top-section {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex: 1;
            padding: 20px;
            background-color: #e8e8e8;
        }

        .total {
            min-width: fit-content;
        }

        .bottom-section {
            display: flex;
            flex: 1;
            background-color: #f0f0f0;
        }

        .left-section {
            display: flex;
            flex: 1;
            flex-direction: column;
            padding: 0 20px 20px;
        }

        .left-section-top {
            height: inherit;
            display: flex;
            flex-direction: row;
            flex: 1;
            background-color: #d8d8d8;
            margin-bottom: 20px;
        }

        .left-section-bottom {
            flex: 1;
            background-color: #c8c8c8;
        }

        .right-section {
            display: flex;
            flex: 1;
            background-color: #b8b8b8;
            padding: 20px;
        }

        /* --------------------------------- 表格 --------------------------------- */
        /* Define styles for the table */
        table {
            border-collapse: collapse;
            width: 100%;
        }

        th,
        td {
            min-width: 50px;
            max-width: fit-content;
            text-align: center;
            padding: 8px;
        }

        th {
            background-color: #555555;
            color: white;
        }

        tr:nth-child(even) {
            background-color: #f2f2f2;
        }

        /* Define styles for the pagination buttons */
        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .page-link {
            background-color: #555555;
            border: none;
            color: white;
            padding: 8px 16px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px;
            cursor: pointer;
        }

        .page-link.active {
            background-color: #4CAF50;
        }

        .page-link:hover:not(.active) {
            background-color: #ddd;
        }
    </style>
    <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
    <!-- 引入 ECharts 文件 -->
    <!-- <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script> -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
    <!-- <script src="https://cdn.staticfile.org/echarts/4.9.0/echarts.min.js"></script> -->
    <!-- 引入 pyecharts 文件 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/pyecharts@1.9.0/dist/pyecharts.min.js"></script> -->
    <!-- 引入地图数据 -->
    <script src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
    <!-- 引入icon图标 -->
    <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4030247_4zwdmxam06q.css">
</head>

<body>

    <!------------------------------------ 模态框界面，即查询窗口 ------------------------------------>
    <div id="myModal" class="modal">
        <div class="modal-content">
            <span class="close">&times;</span>
            <form id="search-form">
                <!-- <form method="post" action="{% url 'search' %}"> -->
                <h1>搜索应用</h1>
                <div id="conditions-container">
                    <div class="condition">
                        <select name="operator_1">
                            <option value="and">AND</option>
                            <option value="or">OR</option>
                            <option value="not">NOT</option>
                        </select>
                        <select name="field_1">
                            <option value="ip_address">IP地址</option>
                            <option value="fingerprint">指纹</option>
                            <option value="website">网址</option>
                            <option value="country">国家</option>
                        </select>
                        <input type="text" name="value_1">
                        <button type="button" onclick="removeCondition(this)">-</button>
                    </div>
                </div>
                <div class="button-container">
                    <button type="button" onclick="addCondition()">添加条件</button>
                    <button type="submit">搜索</button>
                </div>
            </form>
        </div>
    </div>
    <!------------------------------------ 模态框界面，即查询窗口 ------------------------------------>



    <!------------------------------------------ 可视化界面 ------------------------------------------>
    <div class="container">
        <button id="myBtn">点击展示 HTML 界面</button>

        <div class="top-section">
            <div class="total">
                <span id="session_count"></span><br>
                <span id="ip_count"></span><br>
                <span id="ja3_count"></span><br>
                <span id="ja3s_count"></span><br>
                <span id="cert_count"></span><br>
            </div>
            <div id="globalmap" style="width:1000px; height:1000px;"></div>
            <div id="bar" style="width:1000px; height:600px;"></div>
        </div>
        <div class="bottom-section">
            <div class="left-section">
                <div class="left-section-top">
                    <div class="left-section-top-left" id="ja3" style="width:600px; height:600px;"></div>
                    <div class="left-section-top-right" id="versionpie" style="width:500px; height:500px;"></div>
                </div>
                <div class="left-section-bottom" id="ca" style="width:1000px; height:500px;"></div>
            </div>
            <div class="right-section">
                <table id="table">
                    <thead>
                        <tr>
                            <th>IP地址</th>
                            <th>国家</th>
                            <th>TLS版本</th>
                            <th>客户端指纹</th>
                            <th>服务器指纹</th>
                            <th>密码套件</th>
                            <th>证书颁发机构</th>
                            <th>证书签名算法</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- Add table data here -->
                    </tbody>
                </table>
                <div class="pagination"></div>
            </div>
        </div>
    </div>
    <!-- <div id="globalmap" style="width:1000px; height:1000px;"></div> -->
    <!-- <div id="bar" style="width:1000px; height:600px;"></div> -->
    <!-- <span class="iconfont icon-yx_rotate-cw"></span> -->
    <!-- <div id="ja3" style="width:1000px; height:600px;"></div> -->
    <!-- <span class="iconfont icon-yx_rotate-cw"></span> -->
    <!-- <div id="ca" style="width:1000px; height:600px;"></div> -->
    <!-- <span class="iconfont icon-yx_rotate-cw"></span> -->
    <!-- <span class="iconfont icon-yx_rotate-cw"></span> -->
    <!-- <div id="versionpie" style="width:500px; height:500px;"></div> -->
    <!-- <span class="iconfont icon-yx_rotate-cw"></span> -->
    <!------------------------------------------ 可视化界面 ------------------------------------------>





    <!-------JavaScript--JavaScript--JavaScript--JavaScript--JavaScript--JavaScript--JavaScript------->





    <!------------------------------------------ 全局变量声明 ------------------------------------------>
    <script>
        var query;//查询条件
        var conditionIndex;//条件数量
    </script>

    <!------------------------------------------ 全局变量声明 ------------------------------------------>


    <!------------------------------------------ 可视化界面 ------------------------------------------>
    <script>
        var chart = echarts.init(document.getElementById('bar'), 'white', { renderer: 'canvas' });
        var chart2 = echarts.init(document.getElementById('ja3'), 'white', { renderer: 'canvas' });
        var ca = echarts.init(document.getElementById('ca'), 'white', { renderer: 'canvas' });
        var map = echarts.init(document.getElementById('globalmap'), 'white', { renderer: 'canvas' });
        var versionPie = echarts.init(document.getElementById('versionpie'), 'white', { renderer: 'canvas' });
        var tbdata;
        var pageCount;
        // var infortable = echarts.init(document.getElementById('infortable'), 'white', { renderer: 'canvas' });

        fetchData1();
        fetchData2();
        // setInterval(fetchData1, 2000);



        function fetchData1() {

            $.ajax({
                type: "GET",
                url: "http://127.0.0.1:8000/TLS/ip",
                dataType: 'json',
                // data: query,
                success: function (result) {
                    chart.setOption(result.data);
                }
            });
            $.ajax({
                type: "GET",
                url: "http://127.0.0.1:8000/TLS/ja3/",
                dataType: 'json',
                // data: query,
                success: function (result) {
                    chart2.setOption(result.data);
                }
            });
            $.ajax({
                type: "GET",
                url: "http://127.0.0.1:8000/TLS/ca/",
                dataType: 'json',
                // data: query,
                success: function (result) {
                    ca.setOption(result.data);
                }
            });
            $.ajax({
                type: "GET",
                url: "http://127.0.0.1:8000/TLS/versionpie/",
                dataType: 'json',
                // data: query,
                success: function (result) {
                    versionPie.setOption(result.data);
                }
            });
            $.ajax({
                type: "GET",
                url: "http://127.0.0.1:8000/TLS/table/",
                dataType: 'json',
                // data: query,
                success: function (result) {
                    // TODO
                    // tbdata = result.data;
                    tbdata = Object.values(result.data)
                    // Calculate the number of pages
                    pageCount = Math.ceil(tbdata[0].length / pageSize);
                    // Generate the first page of table rows and pagination links
                    generateTableRows();
                    generatePaginationLinks();
                }
            });
            $.ajax({
                type: "GET",
                url: "http://127.0.0.1:8000/TLS/total/",
                dataType: 'json',
                success: function (result) {
                    document.getElementById('session_count').innerText = '会话总数: ' + result.data.session_count;
                    document.getElementById('ip_count').innerText = '服务器IP总数: ' + result.data.ip_count;
                    document.getElementById('ja3_count').innerText = '客户端指纹总数: ' + result.data.ja3_count;
                    document.getElementById('ja3s_count').innerText = '服务器指纹总数: ' + result.data.ja3s_count;
                    document.getElementById('cert_count').innerText = '证书总数: ' + result.data.cert_count;
                }
            });
        }

        function fetchData2() {
            $.ajax({
                type: "GET",
                url: "http://127.0.0.1:8000/TLS/globalmap/",
                dataType: 'json',
                // data: query,
                success: function (result) {
                    map.setOption(result.data);
                }
            });
        }


        // 表格

        // Define the page size
        var pageSize = 15;


        // pageCount = 10

        // Define the current page
        var currentPage = 1;

        // Define the table and pagination elements
        var table = document.getElementById("table");
        var pagination = document.querySelector(".pagination");

        // Define the function to generate table rows
        function generateTableRows() {
            console.log(tbdata);
            // Calculate the start and end indices
            var startIndex = (currentPage - 1) * pageSize;
            var endIndex = Math.min(startIndex + pageSize, tbdata[0].length);

            // Clear the table body
            table.tBodies[0].innerHTML = "";

            // Generate table rows for the current page
            for (var i = startIndex; i < endIndex; i++) {
                var row = table.tBodies[0].insertRow();
                var cell1 = row.insertCell(0);
                var cell2 = row.insertCell(1);
                var cell3 = row.insertCell(2);
                var cell4 = row.insertCell(3);
                var cell5 = row.insertCell(4);
                var cell6 = row.insertCell(5);
                var cell7 = row.insertCell(6);
                var cell8 = row.insertCell(7);
                cell1.innerHTML = tbdata[0][i];
                cell2.innerHTML = tbdata[1][i];
                cell3.innerHTML = tbdata[2][i];
                cell4.innerHTML = tbdata[3][i];
                cell5.innerHTML = tbdata[4][i];
                cell6.innerHTML = tbdata[5][i];
                cell7.innerHTML = tbdata[6][i];
                cell8.innerHTML = tbdata[7][i];
            }
        }

        // Define the function to generate pagination links
        function generatePaginationLinks() {
            // Clear the pagination element
            pagination.innerHTML = "";

            // Generate page links
            for (var i = 1; i <= pageCount; i++) {
                var link = document.createElement("a");
                link.classList.add("page-link");
                if (i === currentPage) {
                    link.classList.add("active");
                }
                link.innerText = i;// 页码
                link.addEventListener("click", function (event) {
                    event.preventDefault();// 阻止默认的click行为
                    currentPage = parseInt(event.target.innerText);// 当前页码
                    generateTableRows();// 生成对应页码的表格
                    generatePaginationLinks();// 生成页面跳转链接
                });
                pagination.appendChild(link);
            }
        }




    </script>
    <!------------------------------------------ 可视化界面 ------------------------------------------>


    <!------------------------------------------- 模态框 ------------------------------------------->
    <script>
        var modal = document.getElementById("myModal");
        var iframe = document.getElementById("myIframe");
        var btn = document.getElementById("myBtn");
        var closeBtn = document.getElementsByClassName("close")[0];

        btn.onclick = function () {
            modal.style.display = "block";
            // iframe.src = "your-html-page.html";
        }

        closeBtn.onclick = function () {
            modal.style.display = "none";
        }
    </script>
    <!------------------------------------------- 模态框 ------------------------------------------->


    <!-------------------------------------------- 查询 -------------------------------------------->
    <script>
        // 刷新数据,带条件请求
        function refreshData() {
            // fetchData1();
            // fetchData2();
        }

        $('#search-form').submit(function (event) {
            event.preventDefault();//阻止默认的sumbit行为
            //TODO
            //获取查询条件
            query = $('#search-form').serialize()
            refreshData();//刷新数据
            modal.style.display = "none";//关闭模态框(搜索框)
        });

    </script>
    <!-------------------------------------------- 查询 -------------------------------------------->


    <!------------------------------------ 模态框界面，即查询窗口 ------------------------------------>
    <script>
        // 隐藏只剩下一个条件时的删除按钮
        if ($('#conditions-container').children().length == 1) {
            $('.condition:first-of-type select:first-of-type').css('display', 'none');
        }
        // 添加condition条件框
        function addCondition() {
            conditionIndex = $('#conditions-container').children().length + 1;
            var conditionHtml = '<div class="condition">' +
                '<select name="operator_' + conditionIndex + '">' +
                '<option value="and">AND</option> ' +
                '<option value="or">OR</option>' +
                '<option value="not">NOT</option>' +
                '</select>' +
                '<select name="field_' + conditionIndex + '">' +
                '<option value="ip_address">IP地址</option>' +
                '<option value="fingerprint">指纹</option>' +
                '<option value="website">网址</option>' +
                '<option value="country">国家</option>' +
                '</select>' +
                '<input type="text" name="value_' + conditionIndex + '">' +
                '<button type="button" onclick="removeCondition(this)">-</button>' +
                '</div>';
            $('#conditions-container').append(conditionHtml);
            // 显示第一个条件的删除按钮
            $('.condition:first-of-type button').css('display', 'inline-block');
        }

        function removeCondition(button) {
            $(button).parent().remove();
            // 显示第一个条件的删除按钮
            $('.condition:first-of-type button').css('display', 'inline-block');
            // 隐藏只剩下一个条件时的删除按钮
            if ($('#conditions-container').children().length == 1) {
                $('.condition:first-of-type button').css('display', 'none');
            }


            // 重命名元素name
            var list = document.getElementById('conditions-container')// 找到列表
            var child = list.firstElementChild// 第一个condition
            var i = 1;
            while (child) {
                var first_select = child.firstElementChild;
                first_select.setAttribute('name', 'operator_' + i);
                var second_select = first_select.nextElementSibling;
                second_select.setAttribute('name', 'field_' + i);
                var input = second_select.nextElementSibling;
                input.setAttribute('name', 'value_' + i)
                child = child.nextElementSibling;
                i++;
            }
        }
    </script>
    <!------------------------------------ 模态框界面，即查询窗口 ------------------------------------>




</body>

</html>